<template>
  <div class="Home">
    <div class="big-box">
      <div class="big-img">
        <el-carousel height="359px">
          <el-carousel-item v-for="item in carouseData" :key="item">
            <img :src="item.url" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="big-box-right">
        <div v-for="item in selectData" :key="item" class="box-img2">
          <img :src="item.url" />
        </div>
      </div>
    </div>

    <div><p style="color: #3997d8; font-size: 30px">今日热播</p></div>
    <div class="movie-box">
      <!-- 开始卡片 -->

      <div v-for="item in movieList" :key="item.id" class="movie-item">
        <el-image style="width: 150px; height: 113px" :src="item.img">
        </el-image>

        <div class="movie-item-content" @click="jumpPlayer(item.id)">
          <p class="title">
            {{ item.name }}
          </p>
          <span style="font-size: 13px">
            评分: <a href="#" style="color: red">{{ item.level }}</a>
          </span>
        </div>
        <div style="margin-top: 10px">
          <p
            style="
              font-size: 12px;
              color: #949494;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ item.memo }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  //内地
  name:"inland",
  data() {
    return {
      //定义跑马灯的图片路径
      carouseData: [
        { url: require("../assets/img/inland/一级轮播图/1.jpg") },
        { url: require("../assets/img/inland/一级轮播图/2.jpg") },
        { url: require("../assets/img/inland/一级轮播图/3.jpg") },
        { url: require("../assets/img/inland/一级轮播图/4.jpg") },
        { url: require("../assets/img/inland/一级轮播图/5.jpg") },
        { url: require("../assets/img/inland/一级轮播图/6.jpg") },
        { url: require("../assets/img/inland/一级轮播图/7.jpg") },
        { url: require("../assets/img/inland/一级轮播图/8.jpg") },
      ],
      selectData: [
        { url: require("../assets/img/inland/一级轮播图2/1.jpg") },
        { url: require("../assets/img/inland/一级轮播图2/2.jpg") },
        { url: require("../assets/img/inland/一级轮播图2/3.jpg") },
        { url: require("../assets/img/inland/一级轮播图2/4.jpg") },
        { url: require("../assets/img/inland/一级轮播图2/5.jpg") },
        { url: require("../assets/img/inland/一级轮播图2/6.jpg") },
        { url: require("../assets/img/inland/一级轮播图2/7.jpg") },
        { url: require("../assets/img/inland/一级轮播图2/8.jpg") },
      ],
      //定义movieList数组
      movieList: [],
      //一页6条
      pageSize: 12, //默认为10
      pageNum: 1,
      searchMovie: "", //搜索需要的值,为空即可,反正不能搜索
      area: 0,
    };
  },
  created() {
    this.getMovie();
  },
  methods: {
    //获取电影资源
    getMovie() {
      request
        .get("/movie/findArea", {
          params: {
            //传入变量
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            name: this.searchMovie,
            area: this.area,
          },
        })
        .then((res) => {
          console.log("分类查询到的数据" + res.data.list);
          //重点 将查询到的数据records 返回给表单中的tableData
          this.movieList = res.data.list;
        });
    },
    //跳转播放电影界面
    jumpPlayer(id) {
      console.log("传出去的id: " + id);
      this.$router.push({ path: "/player", query: { id } });
    },
  },
};
</script>

<style>
.big-box {
  width: 1000px;

  display: flex;
  flex-direction: row;
}
.big-img {
  width: 710px;
  margin-top: 5px;
}
.big-box-right {
  display: flex;
  width: 300px;
  height: 350px;
  flex-wrap: wrap;
}
.box-img2 {
  width: 133px;
  height: 89px;
  margin-left: 10px;
  margin-top: 1px;
}

.movie-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: space-between;
}

/* 
  ==
  ==  电影卡片展示栏
  ==  css
  ==
  ==

*/

.movie-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: space-between;
}
.movie-item {
  width: 150px;
  height: 168px;
  /* margin-top: 20px;
  margin-left: 15px; */
  text-align: center;
  margin-top: 15px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.title {
  width: 60px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 文字缩放为省略号 */
}
.movie-item-content {
  display: flex;
  justify-content: space-around;
}

.movie-item-content :hover {
  color: rgb(88, 117, 209);
}

/* 
== css结束
*/
</style>